<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <p>
          <img />
          <b>营业中/已打烊</b>
        </p>
        <p><span>账户设置</span> <span>退出登录</span></p>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-col :span="24">
            <el-menu
              active-text-color="#7f88ac"
              background-color="#484d5e"
              default-active="2"
              text-color="#7f88ac"
              @open="handleOpen"
              @close="handleClose"
              router
            >
              <el-menu-item index="/staging">工作台</el-menu-item>
              <el-sub-menu index="1-2">
                <template #title>商户管理</template>
                <el-menu-item index="1-2-1">用户管理</el-menu-item>
                <el-menu-item index="1-2-1">商户审核</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="1-3">
                <template #title>菜品管理</template>
                <el-menu-item index="1-3-1">菜品管理</el-menu-item>
                <el-menu-item index="1-3-1">分类管理</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="1-4">
                <template #title>台桌管理</template>
                <el-menu-item index="oneTable">台桌设置</el-menu-item>
                <el-menu-item index="Twotable">桌型管理</el-menu-item>
                <el-menu-item index="threeTable">桌位管理</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="1-5">
                <template #title>订单统计</template>
                <el-menu-item index="1-5-1">用户管理</el-menu-item>
                <el-menu-item index="1-5-1">商户审核</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const list = [
  { tag: "使用中", Dining: "5人就餐", table: "002号桌" },
  { tag: "使用中", Dining: "5人就餐", table: "002号桌" },
  { tag: "使用中", Dining: "5人就餐", table: "002号桌" },
  { tag: "使用中", Dining: "5人就餐", table: "002号桌" },
  { tag: "使用中", Dining: "5人就餐", table: "002号桌" },
  { tag: "空闲中", Dining: "5人就餐", table: "002号桌" },
  { tag: "空闲中", Dining: "5人就餐", table: "002号桌" },
  { tag: "空闲中", Dining: "5人就餐", table: "002号桌" },
  { tag: "空闲中", Dining: "5人就餐", table: "002号桌" },
  { tag: "空闲中", Dining: "5人就餐", table: "002号桌" },
  { tag: "空闲中", Dining: "5人就餐", table: "002号桌" },
  { tag: "使用中", Dining: "5人就餐", table: "002号桌" },
];
</script>

<style lang="scss" scoped>
ul {
  li {
    list-style: none;
  }
}
* {
  margin: 0;
  padding: 0;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: #7764ca;
  color: #fff;
  font-size: 14px;
}
.box {
  background-color: #f2f2f2;
  width: 90vw;
  height: 90vh;
}
.top {
  background-color: #fff;
  height: 200px;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .p {
    display: flex;
    margin-bottom: 10px;
    span {
      display: block;
      font-weight: 700;
      width: 8px;
      height: 20px;
      background-color: #f97d5f;
      font-size: 20px;
      margin-right: 7px;
    }
  }
  .top_left {
    font-size: 14px;
    margin: 10px;
    ul {
      width: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 150px;
        height: 100px;
        background-color: #b6b4ff;
        color: white;
        text-align: center;
        p {
          padding: 10px;
          border-bottom: 1px solid #ccc;
          box-sizing: border-box;
        }
        b {
          font-size: 30px;
        }
      }
      li:first-child {
        background-color: #85b2f6;
      }
      li:last-child {
        background-color: #ffa28f;
      }
    }
  }
  .top_right {
    font-size: 13px;
    ul {
      width: 400px;
      height: 140px;
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: scroll;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
      }
    }
  }
}
.bottom {
  background-color: #fff;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
  .p {
    display: flex;
    margin-bottom: 10px;
    span {
      display: block;
      font-weight: 700;
      width: 8px;
      height: 20px;
      background-color: #f97d5f;
      font-size: 20px;
      margin-right: 7px;
    }
  }
  ul {
    width: 1000px;
    border-top: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 170px;
      height: 140px;
      background-color: #e9eff5;
      margin: 10px;

      h3 {
        color: #666666;
        font-weight: 400;
        margin-top: 15px;
      }
      p {
        font-size: 10px;
      }
      button {
        background-color: #3bb19c;
        color: #fff;
        width: 100px;
        height: 20px;
        line-height: 20px;
        border: 0;
        margin-top: 20px;
        font-size: 10px;
        margin-left: 35px;
      }
    }
  }
}
.p1 {
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-right: 5px;
  box-sizing: border-box;
  span {
    width: 39px;
    background-color: #ff6639;
    color: #fff;
    display: block;
    padding: 2px;
    border-radius: 0 10px 10px 0;
  }
  b {
    font-weight: 400;
  }
}
.p2 {
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-right: 5px;
  box-sizing: border-box;
  span {
    width: 39px;
    background-color: #ccc;
    color: #fff;
    display: block;
    padding: 2px;
    border-radius: 0 10px 10px 0;
  }
  b {
    font-weight: 400;
  }
}
</style>
